<template>
  <div class="showAnswer">
    <div>
      <span v-if="answer.questionResult=='1'" style="color: red">回答错误</span>
      <span v-else style="color:blue">回答正确</span>
    </div>
    <span>正确选项是：</span><font color="#14BA4C" v-html="showAnswer(answer,'correct')" />
    <!--<span style="margin-left:20px;">你的选项是：</span><font color="#F04040" v-html="showAnswer(answer,'owner')" />-->
    <!--questionResult-->
    <div v-if="answer.ifJudge && answer.remark && showAnswer(answer,'correct')==='错误'">
      <span>正确答案是：</span><font color="#F59A23" v-html="answer.remark" />
    </div>
  </div>
</template>

<script>
export default {
  components: { },
  props: {
    answer: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  mounted() {
  },
  methods: {
    showAnswer(val, type) {
      if (val) {
        let correct = ''
        let owner = ''
        if (val.questionDetailList) {
          const idArr = typeof val.checked === 'string' ? [val.checked] : val.checked
          val.questionDetailList.forEach((ele, index) => {
            if (ele.correctOption === '1') {
              if (val.questionDetailList.length === 2) {
                correct = ele.answerOption
              } else {
                correct += (correct === '' ? '' : ',') + (index + 1)
              }
            }
            idArr.forEach(element => {
              if (element === ele.questionDetailId) {
                if (val.questionDetailList.length === 2) {
                  owner = ele.answerOption
                } else {
                  owner += (owner === '' ? '' : ',') + (index + 1)
                }
              }
            })
          })
          return type === 'correct' ? correct : type === 'owner' ? owner : ''
        }
      }
    }
  }
}
</script>
<style lang="less" scoped>
  .showAnswer {
    padding: 12px 0;
    font-size: 16px;
  }
</style>
